<template>
  <div class="center">
    <body-menu></body-menu>
    <!-- <router-view/> -->
    <div class="center-tab-wrapper">
      <div class="center-tab">
        <el-tag class="smart-tab" @click="handleClick(-1)">面板</el-tag>
        <el-tag
          class="smart-tab"
          v-for="(tag,idx) in tags"
          :key="tag.name"
          closable
          @click="handleClick(idx)"
          @close="handleClose(idx)"
          :type="tag.type">
          {{tag.name}}
          <!-- <router-link :to="tag.link">{{tag.name}}</router-link> -->
        </el-tag>
      </div>
      <div class="center-container">
        <!-- <router-view/> -->

        <!-- <component :is='component'></component> -->
        <keep-alive>
          <component :is='component'></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import BodyMenu from './BodyMenu.vue'
import Home from '@/views/Home.vue'
import Test from '@/views/Test.vue'
export default {
  name: 'BodyCenter',
  components:{
    BodyMenu,
    Home,
    Test
  },
  data (){
    return {
      tags: [
        // { name: '标签一', type: '', link: '/test' },
        // { name: '标签二', type: '', link: '/about' },
        // { name: '标签三', type: '', link: '/test' },
        { name: '标签四', type: '', link: '/about' },
        { name: '标签五', type: '', link: '/test2' }
      ],
      current:-1
    }
  },
  computed: {
    component() {
      if(this.current === -1)
        return Home
      else{
        var tag = this.tags[this.current]
        var com = Home
        if(tag.link==='/test')
          com = Test
        else if (tag.link === '/test2'){
          com = ()=>import('@/views/Test.vue')
        }
        return com
      }
    }
  },
  methods: {
    handleClick (idx){
      this.current = idx
    },
    handleClose (idx){
      this.tags.splice(idx, 1)
      this.current = Math.min(idx,this.tags.length-1)
    }
  }
}
</script>
<style lang='stylus' scoped>
  .center
    display:flex
    flex:1
    .center-tab-wrapper
      flex:1
      display:flex
      flex-direction:column
      .center-container
        width:100%
        flex:1
      .center-tab
        display:flex
        background-color:#eee
  .smart-tab
    min-width:.8rem
    height: .34rem
    padding: 0 .2rem
    line-height: .34rem
    font-size: .14rem
</style>
